<!-- app审核 -->
<template>
  <view class="conten">
    <top-tabbar tabTitle="体验课" :titleStatus="tabHeader" :class="tabHeader ? '' : 'tabHeaderBack'"  @click="backClick"></top-tabbar>
    <view class="audition">
        <view class="experience">
           <view class="experImg" v-for="(item,index) in courseList" :key="index">
             <image :src="item.imgUrl" mode="widthFix"></image>
           </view>
          <view style="height: 120rpx;"></view>
          <view class="footer">
             <view class="btnget" @click="promptlyGet">立即领取</view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import { squeezePage, buyClass } from '@/utils/api.js'
  import detaimLoding from '@/components/loding/detaimLoding.vue'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
  import luoButton from '../../components/botton/luo-botton.vue'
  import Boutique from './index.vue'
  export default {
    components: { 
      topTabbar, 
      detaimLoding, 
      easyLoadimage,
      luoButton,
      Boutique
    },
  	data() {
  		return {
        tabHeader: true, // 顶部标题状态
        courseId:'a368d592-3f65-b9af-04ac-3a00150f4e72', // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，// 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644
        fromPary: { // 回显的参数
          phone:'', // 手机号码
          logoImageUrl:'', // 商品图片
          platform: '',
          radid: '',
          rsid:'',
          skuid: ''
        },
        courseStaus: false, // false显示体验课,true是系统课
        codeurl:'', // 需要传给后台的code
        courseList: [// 课程数据
          { id: 1, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperience1.jpg'},
          { id: 2, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperienc2.jpg'},
          { id: 3, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperience3.jpg'},
          { id: 4, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperience4.jpg'},
          { id: 5, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperience5.jpg'},
          { id: 6, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosExper/iosExperience6.jpg'}
        ], 
        pctype: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? false : true,
      }
    },
    onPageScroll({scrollTop}) {
      if(scrollTop < 50) {
         this.tabHeader = true
      }
      if(scrollTop> 50){
        this.tabHeader = false
      }
    },
    onLoad(params) {
      const vm = this
      if(params.platform) {
        let platform = params.platform.toLowerCase() // 转小写
        vm.fromPary.platform = platform
      }
       if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
       vm.$wechat.unseBehavior()
    },
    onShow() {},
    mounted() {},
    methods:{
      // 返回上一页
      backClick() {
        console.log('返回了吗')
       uni.navigateBack({
         delta: 1
       })
      },
      /* 立即领取+跳支付+打开绑定弹窗
       如果是微信环境，判断有没有openId,没有就要授权获取
        如果知道电话号码，说明绑定过，直接跳支付
      */
       promptlyGet() {
         const vm = this
         uni.navigateTo({
           url: '/pages/my/order/iosPayment?phone='+vm.fromPary.phone+'&skuid='+vm.courseId+'&radid'+vm.fromPary.radid+'&rsid'+vm.fromPary.rsid+'&platform='+vm.fromPary.platform
         }) 
       },
       // 手机号码弹窗chage事件
       phoneChange(e) {
          const vm = this
         if(!e.show){
           vm.fromPary.phone = ''
         }
       }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
  /deep/ .top-tabbar-wrap{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #FFFFFF;
  }
  .tabHeaderBack{
    background: rgba(0,0,0,0.3);
  }
  .audition{
    margin-top: 176rpx;
    .experience{
      // 体验课experImg
      .experImg{
        width: 100%;
        height: 1566.66rpx;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF800C;
       text-align: center;
       color: #FFFFFF;
       font-weight: bold;
       font-size: 48rpx;
       color: #FFFFFF;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
       letter-spacing: 0.2em;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
  // 提示手机号码弹窗
  .popup-phone-box{
    width: 670rpx;
    height: 472rpx;
    background: #FFFFFF;
    border-radius: 40rpx;
    .popuo-phone-main{
      padding: 70rpx 48rpx 56rpx 48rpx;
      .hint-title{
        font-size: 32rpx;
        color: #FF800C;
      }
      .phone-input{
        width: 100%;
        height: 72rpx;
        border: 2rpx solid  #FFDAB9;
        border-radius: 36rpx;
        margin: 46rpx 0 76rpx 0;
        padding-left: 48rpx;
        box-sizing: border-box;
        color: #FF800C;
        font-weight: bold;
        font-size: 32rpx;
      }
      .btn-primary{
        width: 100%;
        padding: 16rpx 0;
        background: #FF800C;
        text-align: center;
        margin: auto;
        font-size: 28rpx;
        letter-spacing: 4rpx;
        border-radius: 36rpx;
        font-weight: bold;
        color: #FFFFFF;
      } 
        .close{
          font-size: 20rpx;
          text-align: center;
          color: #8C8C8C;
          margin-top: 16rpx;
        }
    }
  }
  // 添加老师弹窗
  // 添加微信样式
  .popup-addwx{
    width: 560rpx;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 40rpx rgba(0, 0, 0, 0.08);
    border-radius: 40rpx;
    padding: 50rpx 48rpx 36rpx 48rpx;
    text-align: center;
    position: relative;
    .addwx-title{
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 48rpx;
      color: #FF800C;
    }
    .teacher-hint{
      width: 104rpx;
      height: 130rpx;
      position: absolute;
      top: 58rpx;
      left: 47rpx;
      z-index: 1;
    }
    .addwx-main{
      width: 464rpx;
      height: auto;
      background: #FFFAE8;
      border: 1px solid #FFDAB9;
      box-sizing: border-box;
      border-radius: 24rpx;
      padding: 16rpx 40rpx;
      color: #FF800C;
      font-size: 24rpx;
      margin-bottom: 32rpx;
      text-align: justify;
      letter-spacing: -0.1rpx;
      position: relative;
      z-index: 2;
    }
    /deep/ .btn-primary{
      width: 464rpx !important;
      height: 72rpx !important;
      line-height: 72rpx !important;
      margin: auto;
    }
    .hint-popup{
      font-size: 20rpx;
      text-align: center;
      color: #8C8C8C;
      padding-top: 8rpx;
    }
  }
  // 定位顶部老师的狗皮膏药
  .position-top{
     position: fixed;
     left: 0;
     right: 0;
     top: 88rpx;
     // margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
    .teacher-animation{
      animation-fill-mode: both;
      animation: teacher-animation 2s forwards 0.1s;
    }
    .begin-anima{
      animation-name: begin-anima;
      -webkit-animation-name: begin-anima;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;
      visibility: visible !important;
      animation-fill-mode: forwards;
    }
    @keyframes teacher-animation {
       0% { 
         -webkit-transform: translate(0);
         -moz-transform: translate(0);
         -ms-transform: translate(0);
         transform: translate(0);
         opacity: 1;
         }
       100% { 
         -webkit-transform: translate(120%);
         -moz-transform: translate(120%);
         -ms-transform: translate(120%);
         transform: translate(120%);
         opacity: 0;
       }
     }
     @keyframes begin-anima {
        0% { 
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          opacity: 0;
          }
        100% { 
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
          }
      }
    .add-teacher{
      width: 670rpx;
      height: 64rpx;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(12rpx);
      border-radius: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .teacher-img{
        width: 72rpx;
        height: 72rpx;
        position: absolute;
        top: -8rpx;
        left: -6rpx;
      }
      .text-conter{
        font-size: 20rpx;
        margin-left: 94rpx;
        width: 58%;
        color:#FFFFFF;
      }
      .ben-add{
        width: 158rpx;
        height: 64rpx;
        background: #FF800C;
        color: #FFFFFF;
        border-radius: 0px 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .go-addNmae{
          font-weight: 500;
          font-size: 28rpx;
          margin-bottom: 5rpx;
        }
      }
    }
    .animation-circle{
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 38rpx 0px 0px 38rpx;
      z-index: 99;
      display: flex;
      align-items: center;
      .img-box{
        width: 72rpx;
        height: 72rpx;
        margin-left: 5rpx;
      }
    }
  }
</style>
